<html manifest="IGNORE.manifest" lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<!DOCTYPE html>
<html manifest="IGNORE.manifest" id="wodezhanghau" lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
    <link rel="stylesheet" type="text/css" href="../css/index.css"  th:href="@{${uiPath} + ${appName} + '/css/index.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"  th:href="@{${uiPath} + ${appName} + '/css/reset.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/CLS_Single.css"  th:href="@{${uiPath} + ${appName} + '/css/CLS_Single.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"  th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>

</head>
<body>

<div class="zong pinpaijianca">
     <div class="toubu">
       <a href=""><img class="fanhui" src="../images/raw_1503386635.png" alt="" th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
       <p class="bitoati">我的收款账号</p>
       <a href="CLSIndex.html">
       <p class="shouye">首页</p>
       </a>
     </div>
    <form id="commentForm" th:action="@{'/materialUser/account/bankSave'}" method="post">
     <div class="kuai"> </div>
     <div class="chikarenxingming">
         <p class="ckaname">持卡人姓名:</p>
         <input class="zhuanghunamee" type="text" name="bankUsername" placeholder="请输入持卡人姓名">
     </div>
    <div class="chikarenxingming">
        <p class="ckaname">手机号:</p>
        <input class="zhuanghunamee" type="text" name="bankPhone"  placeholder="请输入持卡人手机号">
    </div>
     <div class="chikarenxingming gengxin">
         <p class="ckaname">持卡人姓名:</p>
         <p class="zhanshixingming">李四</p>
         <p class="yinhangzhasi">招商银行   6868686868686868</p>
     </div>
     <div class="tienxijf">
       <p class="tishiutu"><b>!</b></p>
       <p class="tishiyuyu"><b>必须提交本人的银行卡</b></p>
       <div class="xunzyinhang">
          <p class="tishiyixiaixa"><b>1.选择银行</b></p>
           <form class="citylist">
                  <select class="selecity" name="bankAccounts">
                      <option value="1">建设银行</option>
                      <option value="2">工商银行</option>
                      <option value="3">招商银行</option>
                      <option value="4">中国银行</option>
                      <option value="5">农业银行</option>
                      <option value="6">中信银行</option>
                      <option value="7">平安银行</option>
                      <option value="8">光大银行</option>
                      <option value="9">浦发银行</option>
                      <option value="10">广发银行</option>
                      <option value="11">农村信用社</option>
                      <option value="12">邮政储蓄 </option>
                  </select>
            </form>
       </div>
       <div class="xunzyinhang">
          <p class="tishiyixiaixa"><b>2.输入银行卡号</b></p>
           <input class="shurukahao" type="text" name="bankNumber" placeholder="请输入银行卡号">
       </div>
       <div class="xunzyinhang">
          <p class="tishiyixiaixa"><b>3.上传银行卡正面照</b></p>
           <input id="banner" type="text"class="shurukahao"  name="bankPhoto" maxlength="150">
           <p class="paizap" id="picker">点击拍照</p>
           <p class="shili">示例如下</p>
           <div class="silitu">
             <img class="shilitupian" src="../images/148133602968292086.JPEG" alt="" th:src="@{${uiPath} + ${appName} + '/images/148133602968292086.JPEG'}">
          </div>
       </div>
     </div>
     <div class="tijiaotianjia">
         <p class="tianjiayixia">添加</p>
     </div>
    </form>
</div>
<script>var BASE_PATH = '[[${#httpServletRequest.getContextPath()}]]';</script>
<script>var BACK_URL = '[[${#httpServletRequest.getParameter("backurl")}]]';</script>
<script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<!-- <script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script> -->
<script type="text/javascript" src="../js/CLS_Single.js" th:src="@{${uiPath} + ${appName} + '/js/CLS_Single.js'}"></script>
<script type="text/javascript" src="../js/webuploader.min.js" th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>

<script>
    window.onload = function() {
        initUploader();
    };
    function initUploader() {
        //百度上传按钮
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#picker',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on( 'fileQueued', function(file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function(result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function(msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on( 'uploadSuccess', function(file, response) {
            $('.shilitupian').attr('src',response.data.filename);
        });
        uploader.on( 'uploadError', function(file) {
            console.log('uploadError', file);
        });
    }

    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }
    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>
</body>
</html>